<!-- 课程管理 -->
<template>
  <div>
    <el-card v-if="show == 'table'">
      <el-row>
        <el-form ref="form" :model="searchDto" inline label-suffix=":">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入关键字"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-s-open" type="primary" @click="clear"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-plus" type="primary" @click="addAppliance"
              >新增课程</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>

      <page-table
        ref="recovery"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column type="index" label="编号" width="80" align="center" />
        <el-table-column
          prop="name"
          label="课程名称"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <a
              style="color: #409eff; cursor: pointer"
              @click="editColumn(scope.row)"
            >
              {{ scope.row.name }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="课程介绍" align="center" show-overflow-tooltip />
        <el-table-column prop="teacherName" label="教师" align="center" />
        <el-table-column prop="startTime" label="上课时间" align="center" />
        <el-table-column prop="endTime" label="结束时间" align="center" />
        <el-table-column prop="content" label="上课内容" align="center"  show-overflow-tooltip/>
        <el-table-column prop="photos" label="课堂照片" align="center">
          <template slot-scope="scope">
          <a
            style="color: #409eff; cursor: pointer"
            @click="clickPhotosHandle(scope.row)"
          >
            {{ setCredentialNum(scope.row.photos || '')}}
          </a>
        </template>
        </el-table-column>
        <template>
          <el-table-column prop="videos" label="短视频" align="center">
          <template slot-scope="scope">
            <!-- {{scope.row.videos  }} -->
          <a>{{ setCredentialNum(scope.row.videos || '')}}</a>
        </template>
        </el-table-column>
        </template>
        <el-table-column prop="summary" label="结论" align="center" show-overflow-tooltip/>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-edit"
                @click="editAppliance(scope.row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-search"
                @click="view(scope.row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-delete"
                @click="delAppliance(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
      <el-dialog
        title="照片查看"
        :visible.sync="photosVisible"
        width="50%"
        :center="true"
        :before-close="photosHhandleClose"
      >
        <el-row type="flex" justify="center" class="row-bg">
          <el-col :span="12">
            <el-image
              v-for="url in photosList"
              :key="url"
              style="max-width: 50%; height: 50%"
              :src="img + '/' + url"
            ></el-image>
          </el-col>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import template from '../../system/template.vue';
export default {
  components: { template },
  name: "programList",

  data() {
    return {
      show: "table",
      disDetail: {},
      disEdit: {},
      pageData: {},
      loading: false,
      searchDto: {
        pageIndex: null,
        pageSize: null,
        keywords: null,
        startTime: null,
        endTime: null,
        institutionId: null,
      },
      switchValue: true,
      photosVisible:false,
      photosList:null,
      img: window.api.image,
    };
  },

  methods: {
    getInfo() {
      this.API.deleteRecoveryInstitutionById().then((res) => {
        this.searchDto.institutionId = res.data.id;
        this.getPageData();
      });
    },
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      console.log("tem:", tem);
      this.API.getRecoveryCoursePageList(tem).then((ret) => {
        this.pageData = ret.data;
      });
    },

    // 查询
    search() {
      this.getPageData();
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    //   编辑
    editAppliance({ id }) {
      this.$router.push({ name: "curriculumEdit", query: { id } });
    },

    // 新增
    addAppliance() {
      this.$router.push({ name: "curriculumEdit" });
    },
    //  详情
    view({id}) {
      this.$router.push({ name: "curriculumDetail", query: {id } });
    },

    // 删除
    delAppliance({ id }) {
      this.$confirm("确认删除此课程?", "提示", { type: "warning" }).then(() => {
        this.API.deleteRecoveryCourseById({ id }) //更新为教师管理删除接口
          .then((ret) => {
            this.success("删除成功!");
            this.getPageData();
          })
          .catch((err) => {
            this.warning(err);
          });
      });
    },
    clickPhotosHandle(row) {
      this.photosVisible = true;
      this.photosList = row.photos.split(",");
    },
    photosHhandleClose(){
      this.photosVisible=false;
    },
    //
    setCredentialNum(num) {
      if(num===''){
        return 0
      }
      num=num.replace(/^(\s|,)+|(\s|,)+$/gm,'');
      return num.indexOf(",") ? num.split(",").length : 1;
    },

    // 跳转至签到
    editColumn({ id }) {
      this.$router.push({ name: "curriculumSignIn", query: { id } });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>
<style scoped lang="scss"></style>
      